<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
<body>
    <script src="../框架相关的js/vue.js"></script>
    <div id="app">
        <div id="box" @click="fn(1)">点击</div>
        <button v-on:click.ctrl.exact="onCtrlClick">A1</button>
        <button v-on:click.exact="onClick">A2</button>
    </div>




    <script>
        new Vue({
            el: '#app',
            data: {
           
           },
           methods: {
               fn(a){
                   console.log(a,event);
                   console.log(event,'event');
                   if(event){
                       console.log('哈哈哈');
                   }
               },
               onCtrlClick(){
                   console.log('点击事件');
               },
               onClick(){
                   console.log('点击事件没有键盘修饰符');
               }
           },

        })
    </script>
</body>

</html>